<template>
  <div class="box" @click="gotodetail">
    <img :src="item.pic" alt="" />
    <h5>{{ item.title }}</h5>
    <button @click.stop="remove">删除</button>
  </div>
</template>

<script>
export default {
  props: ["item"],
  data() {
    return {};
  },
  mounted() {},
  methods: {
    gotodetail() {
      this.$router.push({ path: "/detail2", query: { id: this.item.id } });
    },
    remove() {
      this.$emit("removes", this.item.id);
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.box {
  width: 50%;
  float: left;
  img {
    width: 100%;
    height: auto;
  }
}
</style>
